.code-editor {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: white;
	box-shadow: 0 0 8px hsla(0, 0%, 20%, 0.25);
	.dragger {
		position: absolute;
		left: -16px;
		top: calc(50% - 16px);
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: white;
		box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
		opacity: 0.2;
		transition: opacity 0.15s linear;
		cursor: w-resize;
		user-select: none;
		.draggerimg {
			width: 100%;
			height: 100%;
			background-image: url();
			background-size: 70%;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0.7;
		}
	}
	.dragger:hover {
		opacity: 1;
	}
	.controller {
		display: flex;
		justify-content: stretch;
		width: 100%;
		height: 40px;
		button {
			flex-grow: 1;
			height: 28px;
			margin: 8px 3px;
			border: none;
			border-radius: 3px;
			background-color: white;
			outline: none;
			box-shadow: 0px 2px 4px hsla(0, 0%, 20%, 0.2);
			cursor: pointer;
			transition: all ease 0.2s;
			&:hover {
				box-shadow: 0px 3px 6px hsla(0, 0%, 20%, 0.3);
				transform: translateY(-1.5px);
			}
			&:active {
				transition: all ease 0.05s;
				box-shadow: 0px 1px 4px hsla(0, 0%, 20%, 0.3);
				transform: translateY(1px);
			}
		}
	}
	.editor {
		position: relative;
		background-color: white;
		flex-grow: 1;
		overflow: auto;
		* {
			line-height: 20px;
			font-size: 13px;
			font-family: Monaco, source-code-pro, Menlo, Consolas, 微软雅黑, 'Courier New', monospace;
		}
		.linepointer {
			position: absolute;
			top: 0;
			height: 20px;
			width: 100%;
			box-sizing: border-box;
			border: hsla(195deg, 90%, 80%, 0.8) 1.5px solid;
			background: hsla(195deg, 80%, 90%, 0.5);
		}
		.lnarea {
			position: absolute;
			width: 36px;
			pointer-events: none;
			.index {
				border-right: royalblue 2px solid;
				padding-right: 4px;
				text-align: right;
			}
		}
		.codearea {
			position: absolute;
			left: 36px;
			top: 0;
			width: calc(100% - 36px);
			min-height: 100%;
			overflow-x: auto;
			@keyframes flash {
				0%, 45%, 100% {
					opacity: 1;
				}
				50%, 95% {
					opacity: 0;
				}
			}
			.opmask {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				min-width: 100%;
				background-color: rgba(127,0,0,0.2);
				outline: none;
				cursor: text;
				opacity: 0.1;
			}
			.pointer {
				position: absolute;
				width: 2px;
				height: 20px;
				background-color: hsla(0, 0, 40%, 0.8);
				animation: 1s linear 0s infinite;
				pointer-events: none;
			}
			.codeline {
				flex-grow: 1;
				text-align: left;
				white-space: nowrap;
				.content {
					display: inline-block;
					padding-left: 4px;
					.char {
						display: inline-block;
						width: 8px;
					}
				}
			}
		}
		@keyframes floatUpNDown {
			from {
				transform: translate(-50%, -2px);
			}
			to {
				transform: translate(-50%, 2px);
			}
		}
		.syntaxerror {
			position: absolute;
			line-height: 12px;
			opacity: 0.7;
			animation: floatUpNDown 1s ease-in-out 0s infinite alternate;
			pointer-events: none;
			.triangle {
				display: inline-block;
				background-image: url();
				width: 12px;
				height: 12px;
				background-size: contain;
			}
			.message {
				padding: 2px 4px;
				line-height: 12px;
				font-size: 12px;
				background: hsla(0, 0%, 100%, 0.8);
				box-shadow: 0 2px 4px hsla(0, 0%, 50%, 0.2);
				border-radius: 10px;
				color: red;
				// text-shadow: 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white;
			}
		}
		.runningpointer {
			position: absolute;
			line-height: 12px;
			opacity: 0.7;
			animation: floatUpNDown 1s ease-in-out 0s infinite alternate;
			pointer-events: none;
			.triangle {
				display: inline-block;
				background-image: url();
				width: 12px;
				height: 12px;
				background-size: contain;
			}
		}
	}
}